<!-- 
  @name: 日期筛选
  @date: 2020.3.10
 -->
<template>
	<view class="date-select" v-show="showPopup">
		<view class="_popup" :style="{top: mtop + 'rpx'}" @touchstart.stop="close"></view>
		<view class="__view" :style="{top: mtop + 'rpx'}">
			<view class="__type">
				<view
					class="__btn"
					v-for="(item, index) in typeList"
					:key="index"
					:class="dateType === index ? 'sl' : ''"
					@tap="changeType(item, index)">
					{{item}}
				</view>
			</view>
			<view class="__select">
				<view class="__cont" :class="startSel ? 'sl' : ''"  @tap="startTime">
					<text class="__dt">
						<text>{{syear}}</text>
						<text v-show="dateType === 1 || dateType === 2">-{{smonth}}</text>
						<text v-show="dateType === 2">-{{sday}}</text>
					</text>
					<view class="_triangle" :class="startSel ? 'atop' : 'abtm'"></view>
				</view>
				<text class="__text">至</text>
				<view class="__cont" :class="endSel ? 'sl' : ''" @tap="endTime">
					<text class="__dt">
						<text>{{eyear}}</text>
						<text v-show="dateType === 1 || dateType === 2">-{{emonth}}</text>
						<text v-show="dateType === 2">-{{eday}}</text>
					</text>
					<view class="_triangle" :class="endSel ? 'atop' : 'abtm'"></view>
				</view>
				<view class="__submit" @tap="putSubmit">确认</view>
			</view>
			<view class="__picker" :class="showPicker ? 'show' : 'nshow'">
				<picker-view
					class="__picker-view"
					v-if="pickerVisible"
					:value="pickerValue"
					:indicator-style="indicatorStyle"
					@change="pickerChange">
				    <picker-view-column>
				        <view class="__item" v-for="(item,index) in yearList" :key="index">{{item}}年</view>
				    </picker-view-column>
				    <picker-view-column v-show="dateType === 1 || dateType === 2">
				        <view class="__item" v-for="(item,index) in monthList" :key="index">{{item}}月</view>
				    </picker-view-column>
				    <picker-view-column v-show="dateType === 2">
				        <view class="__item" v-for="(item,index) in dayList" :key="index">{{item}}日</view>
				    </picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			top: {
				type: [Number, String],
				default: 0  //距离顶部的位置
			},
			show: {
				type: Boolean,
				default: false  //是否显示日期筛选图层
			},
			start: {
				type: String,
				default: '2020-1-1'  //开始日期
			},
			end: {
				type: String,
				default: '2020-1-31'  //结束日期
			}
		},
		data() {
			return {
				mtop: this.top,
				showPopup: this.show,
				
				showPicker: false,  //是否显示筛选区域
				startSel: false,  //是否进行开始日期操作
				endSel: false,  //是否进行结束日期操作
				
				typeList: ['年', '月', '日'],  //筛选类型
				dateType: 2,  //日期筛选类型,默认为日
				
				syear: 2000,  //开始年份
				smonth: 1,  //开始月份
				sday: 1,  //开始天数
				
				eyear: 2020,  //结束年份
				emonth: 1,  //结束月份
				eday: 1,  //结束天数
				
				pickerVisible: true,  //picker-view是否显示(重新渲染)
				pickerValue: [],  //picker-view默认日期
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/80))}px;`,  //picker-view中间行样式
				yearList: [],  //picker-view年份
				monthList: [],  //picker-view月份
				dayList: [],  //picker-view天数
			}
		},
		watch: {
			show(newVal, oldVal) {
				this.showPopup = newVal;
			},
			start(newVal, oldVal) {
				let arr = newVal.split('-');
				this.syear = parseInt(arr[0]);
				this.smonth = parseInt(arr[1]);
				this.sday = parseInt(arr[2]);
			},
			end(newVal, oldVal) {
				let arr = newVal.split('-');
				this.eyear = parseInt(arr[0]);
				this.emonth = parseInt(arr[1]);
				this.eday = parseInt(arr[2]);
			}
		},
		created() {
			this.setPicker();
		},
		methods: {
			//关闭弹窗
			close() {
				this.startSel = false;
				this.endSel = false;
				this.showPicker = false;
				this.pickerVisible = false;
				this.showPopup = !this.showPopup;
				this.$emit('cancle', this.showPopup);
			},
			//点击确定按钮
			putSubmit() {
				let num1 = parseInt(this.syear) % 4;
				let num2 = parseInt(this.eyear) % 4;
				if(this.dateType === 0) {
					//按年筛选
					this.smonth = 1;
					this.sday = 1;
					this.emonth = 12;
					this.eday = 31;
				} else if(this.dateType === 1) {
					//按月筛选
					this.sday = 1;
					this.eday = this.calcDay(this.eyear, this.emonth);
				} else {
					console.log(this.sday);
					//按日刷选
					// if(this.sday >= 29) {
					// 	this.sday = this.calcDay(this.syear, this.smonth);
					// }
					// if(this.eday >= 29) {
					// 	this.eday = this.calcDay(this.eyear, this.emonth);
					// }
				}
				this.startSel = false;
				this.endSel = false;
				this.showPopup = false;
				this.showPicker = false;
				this.pickerVisible = false;
				let startTime = this.syear + '-' + this.smonth + '-' + this.sday;
				let endTime = this.eyear + '-' + this.emonth + '-' + this.eday;
				let startTime2 = startTime;
				let endTime2 = endTime;
				let sdate = new Date(startTime.replace(/-/g, '/'));
				let stime = Date.parse(sdate);
				let edate = new Date(endTime.replace(/-/g, '/'));
				let etime = Date.parse(edate);
				if(etime < stime) {
					startTime = endTime2;
					endTime = startTime2;
				}
				this.$emit('submit', startTime, endTime);
			},
			//通过比较年份月份来确定最终日期
			calcDay(year, month) {
				let day = '31';
				if(month == 4 || month == 6 || month == 9 || month == 11) {
					day = '30';
				} else if (month == 2) {
					let num = parseInt(year) % 4;
					day = num === 0 ? '29' : '28';
				}
				return day;
			},
			//更改筛选方式
			changeType(item, index) {
				this.dateType = index;
			},
			//点击开始筛选框
			startTime() {
				this.endSel = false;
				this.startSel = !this.startSel;
				this.showPicker = this.startSel;
				this.pickerVisible = false;
				if(this.showPicker){
					this.pickerValue = [this.syear - 1, this.smonth - 1, this.sday - 1];
					this.$nextTick(() => { this.pickerVisible = true });
				}
			},
			//点击结束筛选框
			endTime() {
				this.startSel = false;
				this.endSel = !this.endSel;
				this.showPicker = this.endSel;
				this.pickerVisible = false;
				if(this.showPicker){
					this.pickerValue = [this.eyear - 1, this.emonth - 1, this.eday - 1];
					this.$nextTick(() => { this.pickerVisible = true });
				}
			},
			//改变picker的值
			pickerChange(e) {
			    let val = e.detail.value;
			    let year = this.yearList[val[0]];
			    let month = this.monthList[val[1]];
				let day = this.dayList[val[2]];
				if(this.startSel) {
					this.syear = year;
					this.smonth = month;
					this.sday = day;
				} else if (this.endSel) {
					this.eyear = year;
					this.emonth = month;
					this.eday = day;
				}
			},
			//初始化picker
			setPicker() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				for (let i = 1990; i <= year; i++) {
					this.yearList.push(i);
				}
				for (let i = 1; i <= 12; i++) {
					this.monthList.push(i);
				}
				for (let i = 1; i <= 31; i++) {
					this.dayList.push(i);
				}
				//初始化picker-view
				this.pickerValue = [year - 1, month - 1, day - 1];
				this.pickerVisible = false;
				//v-if在切换时，元素及它的绑定数据和组件都会被销毁并重建
				this.$nextTick(() => { this.pickerVisible = true });
			}
		}
	}
</script>

<style lang="scss" scoped>
	$border-radius-sl: 6rpx;
	
	.date-select {
		.__view {
			position: fixed;
			left: 0;
			z-index: $z-index-popup-info;
			width: 750rpx;
			padding: 40rpx;
			box-shadow: $box-shadow;
			background-color: $color-white;
		}
		.__type {
			width: 100%;
			margin-top: 20rpx;
			.__btn {
				display: inline-block;
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				margin-left: 40rpx;
				border-radius: $border-radius-sl;
				background-color: $color-bg;
			}
			.__btn:first-child {
				margin-left: 0;
			}
			.__btn.sl {
				color: $color-white;
				background-color: $color-primary;
			}
		}
		.__select {
			width: 100%;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.__cont.sl {
				color: $color-primary;
				border: 1rpx solid $color-primary;
			}
			.__cont {
				width: 220rpx;
				height: 50rpx;
				padding: 0 20rpx;
				color: $color-grey-dark;
				border-radius: $border-radius-sl;
				border: 1rpx solid $color-grey-light;
				display: flex;
				flex-direction: row;
				align-items: center;
				.__dt {
					flex: 1;
					font-size: 22rpx;
				}
				._triangle {
					margin-left: 0;
				}
				._triangle.atop {
					background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L10-AIn_lAAALei-56gU673.png');
				}
			}
			.__text {
				margin: 0 18rpx;
			}
			.__submit {
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				margin-left: 40rpx;
				color: $color-white;
				background-color: $color-primary;
				border-radius: $border-radius-sl;
			}
		}
		.__picker {
		    width: 100%;
			transition: 0.2s;
			.__item {
			    line-height: 80rpx;
			    text-align: center;
			}
		}
		.__picker.show {
			height: 250rpx;
			margin-top: 40rpx;
		}
		.__picker.nshow {
			height: 0;
		}
		.__picker-view {
			width: 100%;
			height: 100%;
		}
	}
</style>